<%--
  Created by IntelliJ IDEA.
  User: lizhun
  Date: 16/3/19
  Time: 下午4:45
  To change this template use File | Settings | File Templates.
--%>
<%@page  pageEncoding="utf-8" contentType="text/html;charset=utf-8" %>
<%@ include file="../../include/import.jsp" %>
<!doctype html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="${ctx}/resource/teacher/css/libs/CSSRESET.css">
    <link rel="stylesheet" type="text/css" href="${ctx}/resource/teacher/css/common.css">
    <link rel="stylesheet" type="text/css" href="${ctx}/resource/teacher/css/live_teacher.css">
    <script src="${ctx}/resource/teacher/js/libs/jquery-2.1.3.min.js"></script>
    <script>
        $(function(){
            var audio = document.getElementById('audio');

            if(audio.paused){
                audio.play();//播放
            }else{
                audio.pause();// 暂停
            }

            $(".p_mark span").on("click",function()
            {
                var _index=parseInt($(this).index());
                $_parent=$(this).parents(".p_mark");
                $_parent.find("span").removeClass("active");
                $_parent.attr("data-value",_index+1);
                $_parent.find("span:lt("+(_index+1)+")").addClass("active");
            });

            $(".p_mark").each(function(index, element) {
                var _index=parseInt($(this).attr("data-value"));
                $(this).find("span:lt("+(_index)+")").addClass("active");
            });
        });


    </script>
</head>
<body>
<article class="wrapper">
    <div class="main">
        <div class="banner">
            <img src="${ctx}/resource/teacher/img/live_teacher_bg.jpg" alt="" />
            <div class="banner_info">
                <img src="${src}${result.obj.teacher.tea_head_portrait}" alt="" />
                <h3>${result.obj.teacher.tea_name}</h3>
                <h4><span>${result.obj.teacher.country}</span></h4>
                <p><span>${result.obj.teacher.university}</span></p>
            </div>
        </div>

        <div class="self">
            <div><h5><fmt:formatNumber value="${result.obj.teacher.min_amount} " pattern="#0.00"/>  <br/></h5><p>学币/分钟</p></div>
            <div><h5>
                <c:if  test="${result.obj.teacher.tea_total_times > 1000}">
                    <fmt:formatNumber value="${result.obj.teacher.tea_total_times / 60}" pattern="##.##" minFractionDigits="2" ></fmt:formatNumber>h
                </c:if>
                <c:if  test="${result.obj.teacher.tea_total_times <= 1000}">
                    ${result.obj.teacher.tea_total_times}m
                </c:if>


            </h5><p>教学时间</p></div>
            <div><h5>${result.obj.teacher.tea_score}</h5><p>评价</p></div>
            <div><h5>${result.obj.fansnumber}</h5><p>粉丝</p></div>
        </div>
        <!-- self -->

        <div class="profile">
            <h3 class="cm_h3">Ta的简介</h3>
            <%--<div class="audio">--%>
                <%--<audio controls id="audio">--%>
                    <%--<source src="${src}${result.obj.teacher.tea_sound_synopsis}" type="audio/mpeg">--%>
                <%--</audio>--%>
            <%--</div>--%>
            <p>
                ${result.obj.teacher.tea_synopsis}
            </p>
        </div>
        <c:if test="${result.obj.course != null}">
        <div class="course">
            <h3 class="cm_h3">Ta的课堂	</h3>
            <ul class="ul_course">
                <c:forEach items="${result.obj.course}" var="detail" >
                <li data-src="">
                    <div><img src="${src}${detail.banner_img_url}" alt=""  /></div>
                    <div>
                        <h4>${detail.cou_name}</h4>
                        <p>${detail.study_size}人已学</p>
                    </div>
                </li>
                </c:forEach>

            </ul>
        </div>
        </c:if>
        <!-- course -->
        <c:if test="${result.obj.commentSize > 0}">
        <div class="mark">
            <h3 class="cm_h3">Ta收到的评价<span>(${result.obj.commentSize}人评价)</span></h3>
            <ul class="ul_mark">
                <c:forEach items="${result.obj.comment}" var="detail" >
                    <li>
                        <div class="div_mark">
                            <c:choose>
                                <c:when test=" ${fn:containsIgnoreCase(detail.memb_head_portrait, 'http')}">
                                    <div><img src="${detail.memb_head_portrait}" alt="" /></div>
                                </c:when>
                                <c:otherwise>

                                    <div><img src="${src}${detail.memb_head_portrait}" alt="" /></div>
                                </c:otherwise>
                            </c:choose>

                            <div>
                                <h5>${detail.memb_name}	<span><fmt:formatDate value="${detail.com_time}" pattern="yyyy-MM-dd HH:mm" /></span></h5>
                                <p class="p_mark" data-value="5">
                                    <c:choose>

                                        <c:when test="${detail.com_grade==5}">
                                            <span class="active"></span><span class="active"></span><span class="active">
                                        </span><span class="active"></span><span class="active"></span>
                                        </c:when>
                                        <c:when test="${detail.com_grade>=4 && 5>detail.com_grade}">
                                            <span class="active"></span><span class="active"></span><span class="active"></span><span class="active"></span><span></span>
                                        </c:when>
                                        <c:when test="${detail.com_grade>=3 && 4>detail.com_grade}">
                                            <span class="active"></span><span class="active"></span><span class="active"></span><span></span><span></span>
                                        </c:when>
                                        <c:when test="${detail.com_grade>=2 && 3>detail.com_grade}">
                                            <span class="active"></span><span class="active"></span> <span></span><span></span><span></span>
                                        </c:when>
                                        <c:otherwise>
                                            <span class="active"></span><span></span><span></span><span></span><span></span>
                                        </c:otherwise>
                                    </c:choose>
                                </p>
                            </div>
                        </div>
                        <p>${detail.com_content}</p>
                    </li>
                </c:forEach>


            </ul>
        </div>
        <!-- mark -->
        </c:if>
    </div>
</article>

<div class="download">
    <div class="download_wrap">
        <div><img src="${ctx}/resource/teacher/img/icon_face.png" alt="" /></div>
        <div>
            <h5>外教君</h5>
            <p>一键学英语</p>
        </div>
        <div><a href="javascript:;" onclick="window.location='http://a.app.qq.com/o/simple.jsp?pkgname=com.waijiaojun'"></a></div>
    </div>
</div>
<!-- wrapper End -->
</body>
</html>
